<template>
    <div class="adminBox">
        <div class="header">
            <span @click="Cschange">{{ cs.csname }}</span>
            <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" background="none"
                @focus="router.push('/founding')" />
            <span @click="gos">{{ store.logins }}</span>
        </div>
        <div class="main" ref="boxScroll">
            <div class="swipe">
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in store.bannerData" :key="image.bannerid">
                        <img :src="image.img" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 宫格 -->
            <div>
                <van-grid :column-num="3">
                    <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
                </van-grid>
            </div>
            <!-- 秒杀插槽 -->
            <Ms></Ms>
            <div>
                <!-- 懒加载的列表盒子 -->
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="lists"
                    :immediate-check="false">
                    <van-cell v-for="item in store.productList" :key="item.proid">
                        <template #default>
                            <div class="liBox" @click="clickBox(item.proid)">
                                <img :src="item.img1" v-lazy="item.img1">
                                <van-text-ellipsis :content="item.proname" :rows='2' />
                                <div style="color:red">
                                    ￥{{ item.originprice }}
                                    <van-tag plain type="danger" v-if="item.discount != 10">{{ item.discount }}折</van-tag>
                                </div>

                            </div>
                        </template>
                    </van-cell>
                </van-list>
            </div>
        </div>
        <adminBottom></adminBottom>
    </div>
</template>
<script setup lang="ts">
import Ms from './ms.vue'
import {ref, onActivated ,onDeactivated} from 'vue'
import { useRouter } from 'vue-router';
import { useProductStore } from '../store/product';
import { usecs } from '../store/cs'

let store = useProductStore();
let cs = usecs();
const value = ref('');
const boxScroll = ref<HTMLElement | null>(null);
let router = useRouter();
let loading = ref(false);
let finished = ref(false);


// 滚动加载事件
let onLoad = async () => {
    await store.fetchProductList();
    loading.value = false;
    finished.value = store.flag

}

// 点击右上角
const gos = () => {
    if (localStorage.getItem('token')) {
        router.push('/my')
    } else {
        router.push('/login')
    }
}

// 点击商品跳转详情
const clickBox = (id: string) => {
    router.push(`/detail/${id}`)
}
const fn = ()=>{
    store.scrollTop = boxScroll.value!.scrollTop
}

// 当组件激活时
onActivated(() => {
    // 获取轮播图数据
    store.fetchBannerData();
    // 改变导航栏的右侧的数据
    store.fetchChangeHeader();
    // 如果本身商品列表不存在数据 则发送请求
    if (!store.productList.length) {
        store.fetchProductList();
    }
    // 当前滚动条设置
    boxScroll.value!.scrollTop = store.scrollTop;
    // 表单滚动条事件
    console.log(store.scrollTop);
    
    boxScroll.value?.addEventListener('scroll',fn)

}
)
// 当组件未激活时
onDeactivated(() => {
    // 清除事件
    boxScroll.value?.removeEventListener('scroll',fn)
})
// 点击导航栏左侧城市选项
const Cschange = () => {
    router.push({ name: "cs" })
}
</script>

<style scoped>
.adminBox {
    height: 100vh;
    overflow: hidden;
}

.header {
    display: flex;
    align-items: center;
    height: 40px;
    background-color: red;
    color: white;
    font-weight: 700;
    width: 100%;
    justify-content: space-around;
}

.swipe .van-swipe {

    height: 180px;
}

.swipe img {
    height: 100%;
    width: 100%;
}

.main {
    margin-bottom: 13.33333vw;
    box-sizing: border-box;
    overflow-y: scroll;
    height: 100vh;
    width: 100vw;
}

.lists {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    justify-content: space-between;
}

.lists .van-cell {
    width: 48%;
    height: 300px;
    margin-top: 10px;
}

.liBox {
    padding: 5px;
    box-sizing: border-box;
    text-align: left;
}

.liBox img {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
}

.adminBox {
    overflow: auto;
    background-color: #4b544b1f;
}
</style>